|
[1]
[2]
[3]
[4]
[5]
[6]
Frames
I guess the best way to learn frames is to simply do them. We'll discuss the various elements of a Frame Controller and setting up frames. In addition, we have provided four of the most commonly used types of framesets with an example of what the finished web page would look like. - So, let's get started.
The primary tag for creating frames is the <frameset> tag. Several elements within the frameset tag.
The following is a frameset tag which is used to define a simple frame as shown below
<frameset cols="150,*">
</frameset>
The previous example indicates the browser window should be divided into two frames, the first column is 150 pixels wide, and the second column will receive the balance of available browser window space (identified by an Asterisk (i.e. *) as the second parameter to the "cols" attribute. - You can also define the column and row Width in Percentage values by simply adding a percent sign (i.e. %) after the number 150
Within the <frameset> tag we need to communicate to the browser what the source HTML Files will be for the left frame and the right frame. This is accomplished by including the <frame> tag:
<frameset cols="150,*">
<frame name="left-frame" src="left-frame.html">
<frame name="right-frame" src="right-frame.html">
</frameset>
Each Frame is provided a name attribute. This is important for referencing the target when a link is created in one of the two frames. In the above example, the names of the frames are "left-frame" and "right-frame" and the HTML "src" is the URL (relative or absolute) to the HTML file to be displayed in the frame.
The above example is the HTML definitions (tags) that reside in what we will be calling the "Controller Frame" which is basically the main web page that will be linked to. When a web site visitor goes to the "Controlling Frame" the web page will be loaded by dividing the browser window (as specified by the "cols" attribute of the <frameset> tag) and loading two HTML web pages that are defined in the <frame> tag.
One last attribute can be added to support those who may visit your web site with browsers that do not support frames. This is the <noframes> and </noframes> tags. Between these two tags you will place the HTML code that should be displayed to the Web Site visitor if the do not have frames capable browser:
<frameset cols="150,*">
<frame name="left-frame" src="left-frame.html">
<frame name="right-frame" src="right-frame.html">
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
We have used an example for the <noframes> of displaying the text "This page uses frames, but your browser doesn't support them" - We would never do this in a live web site we plan to design. It's the lazy way out. Simply create a web page for those that do not have frame capable browsers and place the code between the <noframes> and </noframes> tags (be sure to include the <body> tags). By doing this, you will be supporting all users the visit your web site, not just a select group.
Now, let's define some further attributes to the <frame> tag to identify some more behaviors such as removing the capability to resize the frame. To accomplish this, simply add the attribute "noresize" as shown in the following example:
<frameset cols="150,*">
<frame name="left-frame" src="left-frame.html" noresize>
<frame name="right-frame" src="right-frame.html" noresize>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
Let's get a little wilder and define the target frame. The target is used in conjunction with links that may be placed in the frame. In our example, the target frame for the left frame will be the right frame. This means that links placed in the left frame will actually load the right frame with the linked web page.
There will be times when you want to create a frame and remove the "Scroll bar" from the frame. This is accomplished by adding the attribute to the <frame> tag as shown in the following example:
<frameset cols="150,*">
<frame name="left-frame" src="left-frame.html" noresize target="right-frame">
<frame name="right-frame" src="right-frame.html" noresize scrolling="no">
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
[1]
[2]
[3]
[4]
[5]
[6]
|
